feat(create-vite): add TanStack Router commands#19573
Conversation
packages/create-vite/src/index.ts
Outdated
| name: 'custom-tanstack-router', | ||
| display: 'TanStack Router ↗', | ||
| color: cyan, | ||
| customCommand: 'npm create -- create-tsrouter-app@latest TARGET_DIR --framework react', |
There was a problem hiding this comment.
shouldn't the create- be removed here?
| customCommand: 'npm create -- create-tsrouter-app@latest TARGET_DIR --framework react', | |
| customCommand: 'npm create tsrouter-app@latest -- TARGET_DIR --framework react', |
There was a problem hiding this comment.
Oh, let me try that!
packages/create-vite/src/index.ts
Outdated
| name: 'custom-tanstack-router', | ||
| display: 'TanStack Router ↗', | ||
| color: cyan, | ||
| customCommand: 'npm create -- tsrouter-app@latest TARGET_DIR --framework react', |
There was a problem hiding this comment.
I'm not sure if the "--" will be removed when using a different package manager. Without it I'm getting this error:
"error: too many arguments. Expected 1 argument but got"
cc @patak-dev
There was a problem hiding this comment.
It seems this works with npm and yarn, but doesn't with pnpm and bun.
I think we can strip -- here for pnpm and bun.
vite/packages/create-vite/src/index.ts
Lines 609 to 616 in c0e68da
There was a problem hiding this comment.
Thanks, updated! I used this to test the regex:
function testReplace(customCommand, pkgManager) {
const result = customCommand.replace(/^npm create (?:-- )?/, () => {
if (pkgManager === 'bun') {
return 'bun x create-';
}
if (pkgManager === 'pnpm') {
return 'pnpm create ';
}
return customCommand.startsWith('npm create -- ')
? `${pkgManager} create -- `
: `${pkgManager} create `;
});
return result;
}
const testCases = [
// Regular npm create commands
{ cmd: 'npm create vue@latest TARGET_DIR', pkgManager: 'npm' },
{ cmd: 'npm create vue@latest TARGET_DIR', pkgManager: 'pnpm' },
{ cmd: 'npm create vue@latest TARGET_DIR', pkgManager: 'bun' },
{ cmd: 'npm create vue@latest TARGET_DIR', pkgManager: 'yarn' },
// Commands with --
{ cmd: 'npm create -- tsrouter-app@latest TARGET_DIR --framework react', pkgManager: 'npm' },
{ cmd: 'npm create -- tsrouter-app@latest TARGET_DIR --framework react', pkgManager: 'pnpm' },
{ cmd: 'npm create -- tsrouter-app@latest TARGET_DIR --framework react', pkgManager: 'bun' },
{ cmd: 'npm create -- tsrouter-app@latest TARGET_DIR --framework react', pkgManager: 'yarn' }
];
testCases.forEach(({ cmd, pkgManager }) => {
const result = testReplace(cmd, pkgManager);
console.log(`\nInput: ${cmd}`);
console.log(`Package Manager: ${pkgManager}`);
console.log(`Result: ${result}`);
});
sapphi-red
changed the title
sapphi-red
added
p2-nice-to-have
|
@wobsoriano We are planning to merge this PR in the next few days. Just to be sure, please let me know if the CLI has changed in the last weeks and this PR needs to be changed as well. |
Both still works and has the correct format 👍🏼 |
3 participants
Description
This PR adds commands to create a new TanStack Router app based on the create-tsrouter-app CLI.